import { getPlatform } from '@UTILS/common'
import React, { useCallback, useState } from 'react';
import { View, OfficialAccount as OfficialAccountWx } from '@tarojs/components';
import './index.scss'

const { isWX } = getPlatform()
const OfficialAccount = () => {
  const [height, setHeight] = useState(0)
  const onLoad = useCallback(event => {
    const { detail } = event
    if (detail.status === 0) setHeight(65)
  }, [setHeight])
  if (!isWX) return null;
  return (
    <View className="officialAccount" style={{ marginTop: height ? 16 : 0, height }}>
      <View className="officialAccountContent">
        <OfficialAccountWx
          onLoad={onLoad}
          style={{ position: 'relative', top: -18, left: -2 }}
        />
      </View>
    </View>
  )
}

export default OfficialAccount
